<template>
  <div id="pbasiinfo" v-cloak>
    <div class="inp1 myinp">
      <div class="inpname">昵称</div>
      <input type="text" v-model="userinfo.username" />
    </div>
    <div class="inp2 myinp">
      <div class="inpname">自我介绍</div>
      <textarea type="text" rows="3" v-model="userinfo.say"></textarea>
    </div>
    <div class="inp3 myinp">
      <div class="inpname">性别</div>
      <div class="sexcheckbox">
        <input type="radio" id="" name="sex" ref="sex1" value="男" /><span
          >男</span
        >
        <input type="radio" id="" name="sex" value="女" /><span>女</span>
      </div>
    </div>
    <div class="inp4 myinp">
      <div class="inpname">地址</div>
      <input type="text" placeholder="省份" v-model="userinfo.province" />
      <input type="text" placeholder="市区" v-model="userinfo.city" />
    </div>
    <div>
      <span class="upbtn" @click="fupdate()">更新</span>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      userinfo: {},
    };
  },
  methods: {
    fupdate() {
      if (this.$refs.sex1.checked) {
        this.userinfo.sex = "男";
      } else {
        this.userinfo.sex = "女";
      }
      this.$axios
        .post("/wxw/walteruser", {
          username: this.userinfo.username,
          say: this.userinfo.say,
          address: `${this.userinfo.province}，${this.userinfo.city}`,
          sex: this.userinfo.sex,
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
  mounted() {
    this.$axios.post("/wxw/wuserinfo").then((res) => {
      this.userinfo = res.data[0];
      let address = this.userinfo.address.split("，");
      this.userinfo.province = address[0];
      this.userinfo.city = address[1];
    });
  },
};
</script>



<style scoped='scoped'>
[v-cloak] {
  display: none;
}
#pbasiinfo {
  margin: 60px 0 0 100px;
  font-size: 16px;
}
.inp1 input {
  padding: 8px;
  width: 182px;
  height: 20px;
  border: 1px solid #f3f3f3;
}
.myinp {
  margin-top: 20px;
  display: flex;
  text-align: right;
}
.myinp .inpname {
  width: 93px;
  height: 29px;
  padding-right: 20px;
}
.inp2 input {
  width: 437px;
  height: 85px;
  padding: 8px;
  border: 1px solid #f3f3f3;
}
.inp3 .sexcheckbox span {
  padding: 0 10px;
}
.inp4 input {
  padding: 8px;
  width: 182px;
  height: 20px;
  border: 1px solid #f3f3f3;
  margin-right: 10px;
}
.upbtn {
  display: inline-block;
  background-color: #dd3915;
  color: #fff;
  padding: 7.5px 30px;
  margin: 50px;
  cursor: pointer;
}
input,
textarea {
  color: #666;
  font-size: 14px;
}
</style>